<template>
	<view>
		<speed-header :list="infoItem" :current="current" :scrollTop="scrollTop"></speed-header>
		
		<view class="steps-wrap">
			<view class="steps-top gray">
				<view class="h ellipsis">南山区天美大厦工程进度表</view>
				<view class="">管理员：xxx 13xxxxxxxx</view>
			</view>
			<view class="mt30">
				<view class="inner f32 mb30">工程进度</view>
				<mo-steps :options="options" :active="2"></mo-steps>
			</view>
		</view>
	
	</view>
</template>

<script>
	import speedHeader from "./components/speed-header.vue"
    import { testApi } from '@/api'
	export default {
		components: {
			speedHeader
		},
		data() {
			return {				
				current: 1,
				loading: false,
				dataList: [],
				dotsStyles: {
					width: 6,
					height: 6,
				},
				options: [
					{title:'主体结构',time:'2018-10-30',desc:'内容描述',speed:52},
					{title:'砌体工程',time:'2019-10-11',desc:'内容描述砌体工程内容描述内容描述内容描述内容描述砌体工程内容描述内容描述内容描述',speed:52},
					{title:'屋面造型',time:'2020-05-20',desc:'内容描述',speed:52},
					{title:'外墙涂料',time:'2021-08-15',desc:'内容描述',speed:0},
					{title:'公区贴砖',time:'2022-04-21',desc:'内容描述',speed:0},
					{title:'园林工程',time:'2023-06-18',desc:'内容描述',speed:0},
				],
				infoItem: [
					{
						colorClass: '',
						link: '/pages/case/list',
						url: '/static/img/banner/002.jpg',
						content: '欧式风格'
					},
					{
						colorClass: '',
						link: '/pages/case/list',
						url: '/static/img/banner/003.jpg',
						content: '简欧饭厅'
					},
					{
						colorClass: '',
						link: '/pages/case/list',
						url: '/static/img/banner/001.jpg',
						content: '欧式主卧'
					}
				],
				scrollTop: 0,

			}
		}, 
		onLoad() {
			this.getList()
		},
		onPageScroll({scrollTop}){
			this.scrollTop = scrollTop
		},
		methods: {
			async getList() {
				this.loading = true;
				let params = {
					projectImg: 'http://prodyg.oppein.cn/Uploads/Document/20180702/5b39db6c01bcc.jpg'
				}
                const res = await testApi(1, 10, params, 15)
                this.dataList = res.data
				this.loading = false;
				console.log(res)
            },
		}
	}
</script>


<style lang="scss" scoped>
.gray{ color: #999; }
.f32{font-size: 32rpx;}
.mt30{margin-top: 30rpx;}
.mt20{margin-top: 20rpx;}
.mt10{margin-top: 10rpx;}
.mb30{margin-bottom: 30rpx;}
.inner{padding-left: 30rpx;padding-right: 30rpx;}
.ellipsis {
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}
.steps{
	&-wrap{
		background-color: #fff;
		position: relative;
		padding-top: 30rpx;
		padding-bottom: env(safe-area-inset-bottom);
		padding-bottom: constant(safe-area-inset-bottom);
		margin-top: -30rpx;
		border-radius: 30rpx 30rpx 0 0;
		z-index: 1;
	}
	&-top{
		font-size: 26rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		.h{
			font-size: 40rpx;
			margin-bottom: 10rpx;
			color: #333;
		}
	}
}
.about{
	// color: #fff;
	border-radius: 10rpx;
	height: 160rpx;
	margin-top: 30rpx;
	padding: 30rpx;
	// background-image: linear-gradient(-45deg,coral,#f66);
}
</style>
